<template>
    <van-row v-if="user.isLogin" class="user-info">
        <van-image v-if="UserActivation.avatar" round width="100" height="100" src="{{ user.avatar }}" />
        <van-image v-else round width="100" height="100" :src="avatar_default" />
        <span class="user-info-name">{{ user.username }}</span>
        <van-button plain type="danger" size="mini" @click="onLogout">退出</van-button>
    </van-row>
    <van-row v-else class="user-info">
        <van-image round width="100" height="100" :src="avatar_defalut" />
        <router-link :to="{name:'login'}">
            <span class="user-info-name">登录 |</span>
        </router-link>
        <router-link :to="{name: '注册'}">
            <span class="user-info-name" :to="{name:'register'}">注册</span>
        </router-link>
    </van-row>
    <van-row class="user-links">
        <van-col span="6">
            <van-icon name="pending-payment" />
                待付款
        </van-col>
        <van-col span="6">
            <van-icon name="records" :badge="UserActivation.isLogin ? '7' : ''"/>
                待收货
        </van-col>
        <van-col span="6">
            <van-icon name="tosend" :badge="UserActivation.isLogin ? '30' : ''"/>
                待评价
        </van-col>
        <van-col span="6">
            <van-icon name="logistics" :badge="UserActivation.isLogin ? '10' : ''"/>
                退还/售后
        </van-col>
    </van-row>
    <van-cell-group class="user-group my-title">
        <van-cell icon="records" title="全部订单" is-link />
    </van-cell-group>
    <van-cell-group class="my-title">
        <van-cell icon="points" tile="我的积分" is-link>
            <van-cell icon="gold-coin-o" title="我的优惠券" is-lin />
            <van-cell icon="gift" title="我的红包" is-link />
        </van-cell>
    </van-cell-group>
</template>

<script setup>
import avatar_defalut from '../assets/images/avatar_default.png'
import router from '../router/index'
import useToken from '../stores/token';
import { showToast } from 'vant';
import useUser from '../stores/user';


const { removeToken } = useToken
const { user, removeUser } = useUser()


const onLogout = async () => {
    removeToken()
    removeUser()
    router.push({name:'user'})
    showToast({
        message:'退出成功',
        type:'success'
    })
}
</script>

<style lang="less" scoped>
.user-info {
    padding: 15px;
    background: url(../assets/images/user_head_bg.png) no-repeat;
    background-size: 100%;
}
.user-info-name {
    
}
</style>